import React from 'react';
import Loadable from '@loadable/component';
/* 作为所有容器的最顶层 */
import { Provider } from 'react-redux';
import reduxMyStore from '../store';
import reduxStore from '../store/reduxStore';
import toolkitStore from '../store/toolKit';

/* 切换渲染的组件 */
const useChangeComp = (init = '') => {
  if (!init) return [''];
  let comp = null;
  switch (init) {
    case 'MyRedux':
      comp = Loadable(() => import('../component/demo/myRedux/LearnRedux'));
      break;
    case 'MyReduxToolkit':
      comp = Loadable(() => import('../component/demo/myReduxTooltik'));
      break;
    case 'MyHooks':
      comp = Loadable(() => import('../component/demo/myHooks/MyHooks'));
      break;
    case 'MyDemo':
      comp = Loadable(() => import('../component/demo/myHooks/MyDemo'));
      break;
    default:
      comp = '';
      break;
  }
  // console.log( 'comp', comp, comp.render );
  return [comp.render];
};

function Demo({ location, ...props }) {
  const { search } = location;
  const [comp] = useChangeComp(search.replace('?type=', ''));

  // 判断一下此时是什么状态，改变store的初始值
  let reduxTypeStore = reduxStore;
  if (location.search?.includes('MyReduxToolkit')) {
    reduxTypeStore = toolkitStore;
  } else if (location.search?.includes('MyDemo')) {
    reduxTypeStore = reduxMyStore;
  }

  return (
    <div className='my__component__wrapper'>
      {/* store={reduxStore} */}
      <Provider store={reduxTypeStore}>
        <h1>Demo: {location.search && location.search.replace('?type=', '')}-组件</h1>
        {comp && comp()}
      </Provider>
    </div>
  );
}

export default Demo;
